<template>
  <my-nav-bar title="忘记密码" class="retrieve_page">
    <van-cell-group>
      <van-notice-bar
        wrapable
        :scrollable="false"
        text="忘记密码了？请输入您的电子邮箱，我们会发送重设邮件到您的邮箱。"
      />
      <van-form @submit="onSubmit">
        <van-field
          v-model="userEmail"
          name="邮箱"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="[{pattern, message: '请输入正确的邮箱'}]"/>
        <div class="submit_button">
          <van-button :disabled="isDisabled" round block type="info" native-type="submit" class="button_main" color="#7232DD">重设密码
          </van-button>
        </div>
      </van-form>
    </van-cell-group>
  </my-nav-bar>
</template>

<script>
import MyNavBar from "@/components/MyNavBar";
import {Form, Field, CellGroup, Button, NoticeBar, Dialog} from "vant";
import {forget} from "@/api/user";

export default {
  name: "Retrieve",
  components: {
    MyNavBar,
    Dialog,
    [Form.name]: Form,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [NoticeBar.name]: NoticeBar

  },
  data() {
    return {
      userEmail: "",
      pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/,
      isDisabled: true,
    }
  },
  beforeUpdate() {
    this.isDisabled = this.userEmail === "";
  },
  methods: {
    onSubmit(values){
      forget({email: this.userEmail}).then(res => {
        Dialog.alert({
          title: '邮件发送成功',
          message: "请到查看邮件，以修改密码"
        }).catch(err => {
          Dialog.alert({
            title:"发送失败",
            message: '请检查网络或者重新发送'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
.retrieve_page {
  background-color: rgb(247, 246, 251);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.submit_button {
  padding: 20px 25px;
}

</style>
